import BannerImg from '@/app/assets/images/customerCase/banner.jpg'
import JJImg from '@/app/assets/images/customerCase/jiangjin.jpg';
import MZImg from '@/app/assets/images/customerCase/mizhou.png';
import QJImg from '@/app/assets/images/customerCase/qianjiang.jpg';
import FoodImg from '@/app/assets/images/customerCase/foods.jpg';
import ZJImg from '@/app/assets/images/customerCase/zhijian.jpg';
import HBImg from '@/app/assets/images/customerCase/huanbao.jpg';
import LSImg from '@/app/assets/images/customerCase/liangshi.jpg';
import Image from "next/image";
import Link from "next/link";


export interface CasesProps {
  src: any,
  title: string,
  path: string,
  code: string
}

// export const cases:CasesProps[] = [
//   {
//     src: JJImg,
//     title: '重庆市江津区生态环境监测站',
//     path: '/pages/customerCase/jiangjin',
//     code: 'jiangjin'
//   },
//   {
//     src: MZImg,
//     title: '首厚LIMS在米舟联发检测正式上线啦！',
//     path: '/pages/customerCase/mizhou',
//     code: 'mizhou'
//   },
//   {
//     src: QJImg,
//     title: '重庆市黔江区疾病预防控制中心',
//     path: '/pages/customerCase/qianjiang',
//     code: 'qianjiang'
//   },
//   {
//     src: FoodImg,
//     title: '食品药品检验检测研究院',
//     path: '/pages/customerCase/foods',
//     code: 'foods'
//   },
//   {
//     src: ZJImg,
//     title: '质检中心',
//     path: '/pages/customerCase/zhijiang',
//     code: 'zhijiang'
//   },
//   {
//     src: HBImg,
//     title: '环保监测站',
//     path: '/pages/customerCase/huanbao',
//     code: 'huanbao'
//   },
//   {
//     src: LSImg,
//     title: '粮油质量检测站',
//     path: '/pages/customerCase/liangyou',
//     code: 'liangyou'
//   },
// ]

const casesList:CasesProps[] = [
  {
    src: JJImg,
    title: '重庆市江津区生态环境监测站',
    path: '/pages/customerCase/jiangjin',
    code: 'jiangjin'
  },
  {
    src: MZImg,
    title: '首厚LIMS在米舟联发检测正式上线啦！',
    path: '/pages/customerCase/mizhou',
    code: 'mizhou'
  },
  {
    src: QJImg,
    title: '重庆市黔江区疾病预防控制中心',
    path: '/pages/customerCase/qianjiang',
    code: 'qianjiang'
  },
  {
    src: FoodImg,
    title: '食品药品检验检测研究院',
    path: '/pages/customerCase/foods',
    code: 'foods'
  },
  {
    src: ZJImg,
    title: '质检中心',
    path: '/pages/customerCase/zhijiang',
    code: 'zhijiang'
  },
  {
    src: HBImg,
    title: '环保监测站',
    path: '/pages/customerCase/huanbao',
    code: 'huanbao'
  },
  {
    src: LSImg,
    title: '粮油质量检测站',
    path: '/pages/customerCase/liangyou',
    code: 'liangyou'
  },
]

const CustomerCase = () => {
  
  function renderItem(item: CasesProps, index: number) {
    const { src, title, path } = item;
    return (
      <div className="flex justify-center mb-2" key={index}>
        <Link href={path}>
          <div className="w-[240px] h-[180px] overflow-hidden">
            <Image 
            src={src} alt={title} 
            className="transition-all hover:scale-125" 
            style={{width: '240px', height: '180px'}} />
          </div>
          <h5 className="mt-2 text-sm text-gray-600 truncate">{title}</h5>
        </Link>
      </div>
    )
  }

  return (
    <main>
        <div 
        className="bg-conver bg-center bg-no-repeat h-[336px] w-full"
        style={{backgroundImage: `url(${BannerImg.src})`}}>

        </div>
        <div className="w-full min-h-[400px] flex justify-center">
          <div className="max-w-screen-xl w-full">
            <div className="w-full h-[200px] flex flex-col items-center justify-center">
              <h4>案例</h4>
              <p>Case</p>
            </div>
            <div className="grid grid-cols-4 pt-4 pb-10">
              {
                casesList.map((item, index) => renderItem(item, index))
              }
            </div>
          </div>
        </div>
      </main>
  )
}


export default CustomerCase